<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>photo瀑布流</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-size: 100%;
        height: 100%;
      }
      .big_box {
        width: 70vw;
        padding: 20px;
        margin: 20px auto;
        position: relative;
        background: #fff;
        box-sizing: border-box;
        padding-left: 10%;
      }
      .small_box {
        width: 150px;
        overflow: hidden;
        position: absolute;
        border-radius: 5px;
        box-sizing: border-box;
        box-shadow: 0 0 7px #89c8eb;
      }
      .picture {
        width: 100%;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="big_box"></div>

    <script>
      let bigBox = document.querySelector(".big_box");
      let num = 6;
      let imgArr = [];
      let pageHeight = 0;
      let start = 0;
      let images = [
        "../image/01.webp",
        "../image/02.webp",
        "../image/03.webp",
        "../image/04.webp",
        "../image/05.webp",
        "../image/06.webp",
        "../image/07.webp",
        "../image/08.webp",
        "../image/09.webp",
        "../image/10.webp",
        "../image/11.webp",
        "../image/12.webp",
        "../image/13.webp",
        "../image/14.webp",
        "../image/15.webp",
        "../image/16.webp",
        "../image/17.webp",
        "../image/18.webp",
        "../image/19.webp",
        "../image/20.webp",
        "../image/21.webp",
        "../image/22.webp",
        "../image/23.webp",
        "../image/24.webp",
      ];

      for (let i = 0; i < 50; i++) {
        create();
      }

      function create() {
        let small = document.createElement("div");
        let image = document.createElement("img");
        small.className = "small_box";
        image.className = "picture";
        image.src = images[parseInt(Math.random() * images.length)];
        imgArr.push(small);
        bigBox.appendChild(small);
        small.appendChild(image);
      }

      function changeImgEvent() {
        for (let i = 0; i < imgArr.length; i++) {
          let settop =
            i < num
              ? 0
              : imgArr[i - num].offsetHeight + 10 + imgArr[i - num].offsetTop;
          imgArr[i].style.top = settop + "px";

          let setleft = (i % num) * imgArr[i].offsetWidth + (i % num) * 10;
          imgArr[i].style.left = setleft + "px";

          pageHeight =
            imgArr[i].offsetHeight + imgArr[i].offsetTop > pageHeight
              ? imgArr[i].offsetHeight + imgArr[i].offsetTop
              : pageHeight;
          bigBox.style.height = pageHeight + "px";
        }
      }

      window.onload = function () {
        changeImgEvent();
        this.addEventListener("scroll", function () {
          let b_height = document.body.clientHeight;
          if (parseInt(this.pageYOffset + this.innerHeight) > b_height - 50) {
            start = imgArr.length;
            for (let i = 0; i < 20; i++) {
              create();
            }
            changeImgEvent();
          }
        });
      };
    </script>
  </body>
</html>
